<template>
    <div class="content">
        <div class="top">
            <div class="top-form">
                <el-select v-model="form.smartstatus" placeholder="智能设备状态" clearable v-if="activeName == 'smartDevice'">
                    <el-option
                            v-for="item in statusList"
                            :key="item.value"
                            :label="item.text"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="form.familystatus" placeholder="家居设备状态" clearable v-else>
                    <el-option
                            v-for="item in statusList"
                            :key="item.value"
                            :label="item.text"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-date-picker
                        id="daily_create_dt"
                        v-model="form.createDt"
                        type="daterange"
                        align="right"
                        start-placeholder="开始日期"
                        range-separator="至"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                        style="margin-left: 10px;width: 21%"
                        class="width-full">
                </el-date-picker>

                <el-input v-model="form.homenum" @keyup.enter.native="search" placeholder="房号"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search" v-if="activeName == 'smartDevice'">查询</el-button>
                <el-button type="primary" icon="el-icon-search" @click="select" v-else>搜索</el-button>
            </div>
        </div>

        <div class="contain">
            <div class="tab">
                <el-tabs type="border-card"  v-model="activeName">
                    <!--                    <el-tab-pane v-for="(item,index) in tabList"-->
                    <!--                                 :key="index"-->
                    <!--                                 :label="item.label"-->
                    <!--                                 :name="item.name">-->
                    <!--                        <keep-alive>-->
                    <!--&lt;!&ndash;                            <component :is='item.component' :ref="item.component"></component>&ndash;&gt;-->

                    <!--                        </keep-alive>-->
                    <!--                    </el-tab-pane>-->
                    <el-tab-pane label="智能设备" name="smartDevice" style='background-color:white'>
                        <div class="down-form">
                            <div class="table">
                                <el-table
                                        ref="logTable"
                                        :data="tableData"
                                        v-loading="loading"
                                        border
                                        :header-cell-style="{'background':'#eef1f6','color':'#1f2d3d','border-color':'#dfe6ec'}"
                                        style="width: 100%;font-size: 14px;color: #1f2d3d">
                                    <el-table-column
                                            prop="unitname"
                                            label="单元名称"
                                            min-width="15%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="buildnum"
                                            label="幢号"
                                            min-width="7%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="homenum"
                                            label="房号"
                                            min-width="8%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="homename"
                                            label="房主"
                                            min-width="10%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="airnum"
                                            label="空调"
                                            min-width="6%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="wifiname"
                                            label="Wi-Fi"
                                            min-width="13%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="washnum"
                                            label="洗衣机"
                                            min-width="6%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="createtime"
                                            label="授予时间"
                                            min-width="18%"
                                            show-overflow-tooltip
                                            :formatter="dateFormat"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="smartstatus"
                                            label="状态"
                                            min-width="9%"
                                            align="center"
                                            :formatter="typeFormatter">
                                    </el-table-column>
                                    <el-table-column label="操作状态" min-width="8%" align="center">
                                        <template slot-scope="scope">
                                            <el-tooltip :content="'Switch status: ' + scope.row.smartstatus" placement="top">
                                                <el-switch
                                                        v-model="scope.row.smartstatus"
                                                        @change="handleShowStatusChangeSmart(scope.row)"
                                                        :active-value="1"
                                                        :inactive-value="2">
                                                </el-switch>
                                            </el-tooltip>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="block">
                                <el-pagination @current-change="handleCurrentChange"
                                               layout="total, sizes,prev, pager, next, jumper"
                                               :current-page.sync="iPagination.current"
                                               :page-size='iPagination.pageSize'
                                               :page-sizes="iPagination.pageSizeOptions"
                                               :total="iPagination.total"
                                               background
                                               @size-change="handleSizeChange">
                                </el-pagination>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="家居设备" name="houseDevice"  style='background-color:white'>
                        <div class="down-form">
                            <div class="table">
                                <el-table
                                        ref="logTable"
                                        :data="tableList"
                                        v-loading="loading"
                                        border
                                        :header-cell-style="{'background':'#eef1f6','color':'#1f2d3d','border-color':'#dfe6ec'}"
                                        style="width: 100%;font-size: 14px;color: #1f2d3d">
                                    <el-table-column
                                            prop="unitname"
                                            label="单元名称"
                                            min-width="18%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="buildnum"
                                            label="幢号"
                                            min-width="10%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="homenum"
                                            label="房号"
                                            min-width="10%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="homename"
                                            label="房主"
                                            min-width="10%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="homedesk"
                                            label="书桌"
                                            min-width="6%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="homechair"
                                            label="椅子"
                                            min-width="6%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="homeclothes"
                                            label="衣柜"
                                            min-width="6%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="createtime"
                                            label="授予时间"
                                            min-width="18%"
                                            show-overflow-tooltip
                                            :formatter="dateFormat"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="familystatus"
                                            label="状态"
                                            min-width="8%"
                                            align="center"
                                            :formatter="typeFormatter1">
                                    </el-table-column>
                                    <el-table-column label="操作状态" min-width="8%" align="center">
                                        <template slot-scope="scope">
                                            <el-tooltip :content="'Switch status: ' + scope.row.familystatus" placement="top">
                                                <el-switch
                                                        active-color="#13ce66"
                                                        inactive-color="#ff4949"
                                                        v-model="scope.row.familystatus"
                                                        @change="handleShowStatusChangeHouse(scope.row)"
                                                        :active-value="1"
                                                        :inactive-value="2">
                                                </el-switch>
                                            </el-tooltip>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="block">
                                <el-pagination @current-change="handleCurrentChange"
                                               layout="total, sizes,prev, pager, next, jumper"
                                               :current-page.sync="iPagination.current"
                                               :page-size='iPagination.pageSize'
                                               :page-sizes="iPagination.pageSizeOptions"
                                               :total="iPagination.total"
                                               background
                                               @size-change="handleSizeChange">
                                </el-pagination>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>


    </div>
</template>

<script>
    import moment from 'moment'
    import dateFunc from '@/utils/dateFunc'
    // import smartDevice from "@/components/page/house/deviceInfo/smartDevice"
    // import houseDevice from "@/components/page/house/deviceInfo/houseDevice"
    export default {
        name: "index",
        components:{
          // smartDevice,
          // houseDevice
        },
        data(){
            return{
                tableList:[],
                tableData:[],
                loading:false,
                iPagination: {
                    current: 1,
                    pageSize: 10,
                    pageSizeOptions: [5, 10, 20, 50, 100],
                    total: 0,
                    "page": 0,
                    "pageSize": 10,
                },
                form: {
                    smartstatus: '',
                    familystatus:'',
                    createDt: '',
                    homenum:'',
                },
                statusList: [
                    {
                        text: '完好',
                        value: '1'
                    },
                    {
                        text: '待维修',
                        value: '2'
                    }
                ],
                activeName: 'smartDevice',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick: function onClick(picker) {
                            var end = new Date();
                            var start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick: function onClick(picker) {
                            var end = new Date();
                            var start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick: function onClick(picker) {
                            var end = new Date();
                            var start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            }
        },
        created(){
            this.getSmartDevice()
            this.getHouseDevice()
        },
        methods:{
            handleCurrentChange (val) {
                this.iPagination.current = val;
                if (this.activeName == 'smartDevice'){
                    this.getSmartDevice();
                } else {
                    this.getHouseDevice()
                }

            },
            handleSizeChange (val) {
                this.iPagination.current = 1;
                this.iPagination.pageSize = val;
                if (this.activeName == 'smartDevice'){
                    this.getSmartDevice();
                } else {
                    this.getHouseDevice()
                }
            },
            // 获取智能设备信息
            getSmartDevice(){
                this.loading = true;
                const params = {...this.form.createDt}
                console.log(params,33)
                params.startDate = dateFunc.format(params[0],'YYYY-MM-DD');
                params.endDate = dateFunc.format(params[1],'YYYY-MM-DD');
                this.$delete(params, 'createDt')
                this.$axiosToken({
                    url: '/house/searchdeviceList',
                    method: 'get',
                    data:{
                        smartstatus: this.form.smartstatus,
                        familystatus: this.form.familystatus,
                        homenum: this.form.homenum,
                        startDate: params.startDate,
                        endDate: params.endDate,
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success: (result)=>{
                        this.tableData = result.data;
                        this.iPagination.total = result.total;
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },
            //获取家居设备信息
            getHouseDevice(){
                this.loading = true;
                const params = {...this.form.createDt}
                console.log(params,33)
                params.startDate = dateFunc.format(params[0],'YYYY-MM-DD');
                params.endDate = dateFunc.format(params[1],'YYYY-MM-DD');
                this.$delete(params, 'createDt')
                this.$axiosToken({
                    url: '/house/searchdeviceList',
                    method: 'get',
                    data:{
                        smartstatus: this.form.smartstatus,
                        familystatus: this.form.familystatus,
                        homenum: this.form.homenum,
                        startDate: params.startDate,
                        endDate: params.endDate,
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success: (result)=>{
                        this.tableList = result.data;
                        this.iPagination.total = result.total;
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },

            // 改变状态
            handleShowStatusChangeSmart(row){
                this.$confirm('确定更新该智能设备状态？', '提示', {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(()=>{
                    // const id = row.id;
                    this.$axiosToken({
                        url: '/house/updatesmartStatus',
                        method: 'post',
                        data:{
                            id: row.id,
                            smartstatus: row.smartstatus
                        },
                        success: (result) =>{
                            this.$message({
                                showClose: true,
                                message: '智能设备状态改变成功',
                                type: 'success'
                            });
                            this.getSmartDevice()
                        }
                    })

                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '已取消改变智能状态',
                    });
                    this.getSmartDevice()
                })
            },
            // 改变状态
            handleShowStatusChangeHouse(row){
                this.$confirm('确定更新该家居设备状态？', '提示', {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(()=>{
                    // const id = row.id;
                    this.$axiosToken({
                        url: '/house/updatefamilyStatus',
                        method: 'post',
                        data:{
                            id: row.id,
                            familystatus: row.familystatus
                        },
                        success: (result) =>{
                            this.$message({
                                showClose: true,
                                message: '家居设备状态改变成功',
                                type: 'success'
                            });
                            this.getHouseDevice()
                        }
                    })

                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '已取消改变家居状态',
                    });
                })
            },

            // 状态转为文字
            typeFormatter(row,column){
                const smartstatus = row.smartstatus
                if (smartstatus == 1){
                    return '完好'
                }else {
                    return '待维修'
                }
            },
            // 状态转为文字
            typeFormatter1(row,column){
                const familystatus = row.familystatus
                if (familystatus == 1){
                    return '完好'
                }else {
                    return '待维修'
                }
            },

            // 时间格式转化
            dateFormat(row,column) {
                var date = row[column.property];
                if(date == undefined){
                    return ''
                }else {
                    return moment(date).format("YYYY-MM-DD HH:mm:ss")

                }
            },
            search() {
                this.iPagination.current = 1;
                this.getSmartDevice()
            },
            select(){
                this.iPagination.current = 1;
                this.getHouseDevice()
            }

        }
    }
</script>

<style scoped>
    /deep/ .el-input__inner{
        font-size: 14px;
        height: 36px;
    }
    .el-input{
        width: 21%;
        margin-left: 10px;
    }
    /deep/ .el-input__icon.el-range__icon.el-icon-date {
        line-height: 27px;
    }
    .el-select{
        width: 21%
    }
    .el-button{
        margin-left: 10px;
        width: 8%;
        font-size: 14px;
        color: #fff;
    }
    .tab{
        margin-top: 15px;
    }
    .block{
        float: right;
        margin-top: 10px;
    }
    /deep/ .el-input.el-input--mini.el-input--suffix>.el-input__inner{
        height: 28px;
    }
</style>